<!--script setup></!--script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>-->

<!--<template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
</template>
<script>
</script>
<style scoped>
</style>-->

<!--demp-4-2-->
<!--template>
  <div>
    <NumberCom />
    <NumberCom />
  </div>
</template>

<script>
import NumberCom from '../components/NumberCom.vue'
export default {
  components:{
    NumberCom
  },
}
</script>-->

<!--demp-4-3-->
<!--<template>
  <div>
    <HelloCom name="Jim"></HelloCom>
    <HelloCom name="Lily"></HelloCom>
    <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
import HelloCom from './components/HelloCom.vue';
export default{
  components:{
    HelloCom,
  },
};
</script>-->

<!--demp-4-4-->
<!--<template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1" />ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2" />ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>

<script>
import ActiveCom1 from "./components/ActiveCom1.vue";
import ActiveCom2 from "./components/ActiveCom2.vue";
export default {
  data() {
    return {
      activeComponent: "ActiveCom2",
    };
  },
  components: {
    ActiveCom1,
    ActiveCom2,
  },
};
</script>

<style scoped>
</style>-->

<!--demp-4-5---->
<!--<template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const AsyncCom = defineAsyncComponent(
  () => import("./components/HelloCom2.vue")
)
export default {
  components: {
    AsyncCom
  }
}
</script>

<style scoped>
</style>-->

<!--demp-4-6---->
<!--<template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default {
  data() {
    return {
      currentTab: "Tab1",
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>

<style scoped>
</style>-->

<!--demp-4-7---->
<!--<template>
  <div>
    <ChildCom msg="Hello,I am dad!"></ChildCom>
  </div>
</template>
<script>
import ChildCom from './components/ChildCom.vue';

export default {
  components:{
    ChildCom
  }
};
</script>
<style scoped>
  
</style>-->

<!--demp-4-8---->
<template>
  <div>
    <ChildCom1 :name="name" :age="age" />
    <myCom1 :parentMsg="msg"></myCom1>
    <myCom2 :ChildWidth="width"></myCom2>
  </div>
</template>
<script>
import ChildCom1 from './components/ChildCom1.vue';
import myCom1 from './components/MyCom1.vue';
import myCom2 from './components/MyCom2.vue';

export default {
  data() {
    return {
      name:"Jim",//姓名
      age:[],//年龄
      gender:'',//性别
      hobby:[],//爱好
      width:400,
      msg:'父组件的msg'
    }
  },
  components:{
    ChildCom1,
    myCom1,
    myCom2
  }
};
</script>
<style scoped>
  
</style>
